<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:28
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/IncludeTop.jsp"%>

    <link rel="StyleSheet" href="../css/register.css" type="text/css" media="screen"/>

    <form action="userRegister" name="newAccount" id="userRegisterForm" method="post">
        <div id="registerForm">
            <div id="step1" class="steps">
                <div class="title">User Register</div>
                <div class="inputLine less">
                    <div class="label">User ID:</div>
                    <input type="text" id="username" name="username" />
                    <div id="usernameMessage"></div>
                </div>
                <div class="inputLine less">
                    <div class="label">New password:</div>
                    <input type="text" name="password" />
                </div>
                <div class="inputLine less">
                    <div class="label">Repeat password:</div>
                    <input type="text" name="repeatedPassword" />
                </div>
                <div class="button" id="nextTo2">Next&nbsp;&gt;</div>
            </div>
            <%@ include file="IncludeAccountFields.jsp"%>
        </div>
    </form>

    <script type="text/javascript">
        $(()=>
        {
            var $flag = 0;
            $('.steps:not("#step1")').css({'display':'none'});


            $('#step1').addClass('fadeInLeft').on('animationend', ()=>
            {
                if($flag === 1)
                {
                    $('#step1').css('display', 'none').removeClass('fadeOutLeft').removeClass('fadeInLeft').removeClass('fadeInRight');
                }
            });

            $('#step2').on('animationend', ()=>
            {
                if($flag === 2)
                {
                    $('#step2').css('display', 'none').removeClass('fadeOutRight').removeClass('fadeInLeft').removeClass('fadeInRight').removeClass('fadeOutLeft');
                }
            });

            $('#step3').on('animationend', ()=>
            {
                if($flag === 3)
                {
                    $('#step3').css('display', 'none').removeClass('fadeOutRight').removeClass('fadeInLeft');
                }
            });

            var $ok = 'no';
            $('#username').on('blur', ()=>
            {
                var $username = $('#username').val();
                if($username === '')
                {
                    $('#usernameMessage').text('Username Invalid').css({'opacity':'1', 'color':'#833d1e'});
                    $ok = 'no';
                }
                else
                {
                    $.get('checkUserName', 'username=' + $username, (msg) => {
                        if(msg === 'no')
                        {
                            $('#usernameMessage').text('Username Exists').css({'opacity':'1', 'color':'#833d1e'});
                            $ok = 'no';
                        }
                        else
                        {
                            $('#usernameMessage').text('Username Valid').css({'opacity':'1', 'color':'#507e64'});
                            $ok = 'yes';
                        }
                    });
                }
            });

            var times = 0;//统计动画个数
            $('#nextTo2').on('animationend', ()=>
            {
                times++;
                if (times === 1)
                {
                    $('#nextTo2').text('Username Invalid');
                }
                else if(times === 2)
                {
                    $('#nextTo2').text('Next>');
                }
                if(times === 3)
                {
                    $('#nextTo2').removeClass('errorButton');
                    times = 0;
                }
            }).on('click', ()=>
            {
                if($ok === 'no')
                {
                    $('#nextTo2').addClass('errorButton');
                }
                else if($ok === 'yes')
                {
                    $flag = 1;
                    $('#step1').addClass('fadeOutLeft');
                    $('#step2').addClass('fadeInLeft').css('display', 'block');
                }
            });

            $('#previousTo1').on('click', ()=>
            {
               $flag = 2;
               $('#step2').addClass('fadeOutRight');
               $('#step1').css('display', 'block').addClass('fadeInRight');
            });

            $('#nextTo3').on('click', ()=>
            {
                $flag = 2;
                $('#step2').addClass('fadeOutLeft');
                $('#step3').css('display', 'block').addClass('fadeInLeft');
            });

            $('#previousTo2').on('click', ()=>
            {
                $flag = 3;
                $('#step3').addClass('fadeOutRight');
                $('#step2').css('display', 'block').addClass('fadeInRight');
            });

            var $switch = 0;//记录动画
            var $click = 0;//记录点按
            $('#registerSubmit').on('click', ()=>
            {
                $click++;
                if($click >= 2)
                {
                    return;
                }
                $('#registerSubmit').addClass('waiting').text('');
                var $registerInfo = $('#userRegisterForm').serialize();
                $.post('userRegister', $registerInfo, (msg)=>
                {
                    if(msg === 'ok')
                    {
                        $switch = 1;
                        $click = 0;
                        $('#registerSubmit').removeClass('waiting').text('Success!').addClass('success');
                    }
                });
            }).on('animationend', ()=>
            {
                if($switch === 1)
                {
                    setTimeout(()=>
                    {//仅仅为了模拟服务器延时效果
                        window.location.href = 'main';
                    }, 2000);
                }
            });
        });
    </script>

<%@ include file="../common/IncludeBottom.jsp"%>